<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D转换</title>
    <link rel="stylesheet" href="public.css">
    <style>
        .xuanzhuan {
            position: relative;
            display: inline-block;
            /* background-color: red; */
            /* border: solid 2px; */
            height: 200px;
            width: 300px;
            margin-right: 5px;
        }

        .xuanzhuan :first-child {
            position: absolute;
            z-index: -1;
            margin: 10px;
            width: 150px;
            height: 100px;
            display: inline-block;
            text-align: center;
            padding-top: 30px;
            background-color: aquamarine;
            font-size: 10px;
            box-sizing: border-box;
            
        }
        .xuanzhuan :last-child {
            position: absolute;
            margin: 10px;
            width: 150px;
            height: 100px;
            display: inline-block;
            text-align: center;
            padding-top: 30px;
            background-color: rgba(0,128, 0, 0.7);
            /* background-color: seagreen; */
            /* opacity: calc(0.8); */
            font-size: 10px;
            box-sizing: border-box;
            
        }
    </style>
</head>

<body>
    <div>
        <!-- translate -->
        <h3>1、translate</h3>
        <p>translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。</p>
        <div class="start-center">
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: translate(20px, 30px);">translate(20px, 30px)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: translate(-20px, 30px);">translate(-20px, 30px)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: translate(50%, 50%);">translate(50%, 50%)</div>
            </div>
        </div>

        <!-- rotate() 方法 -->
        <h3>2、rotate() 方法</h3>
        <p>rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。</p>
        <div class="start-center">
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: rotate(30deg);">rotate(30deg)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: rotate(-20deg);"> rotate(-20deg)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: rotate(90deg);">rotate(90deg)</div>
            </div>
        </div>
       
        <h3>3、scale()方法</h3>
        <p> scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数</p>
        <div class="start-center">
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: scale(1.5,1.5);">scale(1.5,1.5)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: scale(0.8);">scale(0.8)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: scale(1.5,0.8);">scale(1.5,0.8)</div>
            </div>
        </div>

        <h3>4、skew() 方法</h3>
        <p> 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。</p>
        <div class="start-center">
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: skew(0,30deg);">skew(0,30deg)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: skew(30deg,0);">skew(30deg,0)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: skew(30deg,-30deg);">skew(30deg,-30deg)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: skew(30deg,30deg);">skew(30deg,30deg)</div>
            </div>
        </div>

        <h3>5、matrix() 方法</h3>
        <p> matrix()方法和2D变换方法合并成一个。
            <br> matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。</p>
            <a href="https://www.jianshu.com/p/da7828884f59">详情见这里，涉及矩阵运算</a>
        <div class="start-center">
            <div class="xuanzhuan">
                <div>1</div>
                <!-- 旋转30° -->
                <div style="transform: matrix(0.866,0.5,-0.5,0.866,0,0);">matrix(0.866,0.5,-0.5,0.866,0,0)</div>
            </div>
            <div class="xuanzhuan">
                <div>1</div>
                <div style="transform: matrix(0.5,0,0,0.5,0,0);">matrix(0.5,0,0,0.5,0,0)</div>
            </div>
            
        </div>

    </div>

</body>

</html>